<template>


  <div id="tab">
    <n-tabs type="card" size="small" closable @close="handleClose" :on-update:value="switchTab"
            :tab-style="{'padding-top': 2 + 'px'}"
            style="height: 100%;width: 100%; ;
">
      <n-tab-pane v-for="item in tabList" :key="item.title" :name="item.title" :closable="item.closable"
                  style="height: 100%;width: 100%; padding-top: 0">

        <SqlQuery v-if="item.componentName === 'SqlQuery'" style="height: 100%;width: 100%"></SqlQuery>
        <TableObjectList v-else-if="item.componentName === 'TableObjectList'"></TableObjectList>

      </n-tab-pane>
    </n-tabs>

  </div>


</template>

<script setup lang="ts">
import {ref, PropType, defineEmits, defineComponent, onMounted} from 'vue'
import {
  ViewObjectOperationEnum, ViewObjectData, TableObjectQueryInfo
} from '../object/ViewObjectData'
import TabListInfo from "./TabListInfo";

// defineProps 是在 <script setup> 中隐式可用的
const props = defineProps({
  tabList: {
    type: Array as PropType<TabListInfo[]>,
    default: () => []
  },
  //可能是数据或者是表
  viewObjectData: {
    type: Object as PropType<ViewObjectData>,
    default: () => undefined
  }
});

//数据表信息
const tableInfo = ref();
const handleClose = (name: string) => {
  console.log("处理可关闭", name, props.tabList)
  for (let i = 0; i < props.tabList?.length; i++) {
    let item = props.tabList[i];
    console.log("item", item)
    if (name === item.title) {
      props.tabList?.splice(i);
      break;
    }
  }
}
const switchTab = (name: string) => {
  for (let i = 0; i < props.tabList?.length; i++) {
    let item = props.tabList[i];
    if (name === item.title) {
      item.visible = true;
    } else {
      item.visible = false;
    }
  }
  console.log("切换", name, props.tabList)
}


</script>

<style scoped>
#tab {
  height: 100%;
  width: 100%;
  background-color: #fff;
}

.pane-class {
}

</style>